import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//引入 base.css
import './css/base.css'

//需要提前导入组件
import Find from './views/Find.vue'
import My from './views/My.vue'
import Part from './views/Part.vue'
import NotFound from './views/NotFound.vue'

import Recommend from './views/second/Recommend.vue'
import Ranking from './views/second/Ranking.vue'
import SongList from './views/second/SongList.vue'

//1.下包
//2.引入 vue-router
import VueRouter from 'vue-router'

//3.使用 Vue.use() 方法给 vue 安装插件
// 内部会帮我们注册两个全局组件: RouterLink RouterView
Vue.use(VueRouter)

//4.创建路由规则数组
const routes = [
  //一个对象就是一条规则
  //规则对象中两个核心属性
  //path         路由
  //component    组件
  {
    path: '/', //默认hash值路径
    redirect: '/find' //重新定向到 /find
    //浏览器 url 中#后的路径被改成 /find 重新匹配数组规则
  },
  {
    path: '/find',
    component: Find,
    name: 'Find',
    children: [
      {
        //二级路由中 path 不用 / 开头
        path: 'ranking', //匹配路径时会自动拼接一级路由, /find/ranking
        component: Ranking
      },
      {
        path: 'recommend',
        component: Recommend
      },
      {
        path: 'songlist',
        component: SongList
      }
    ]
  },
  { path: '/my', component: My, name: 'My' },
  { path: '/part', component: Part, name: 'Part' },
  { path: '/part/:name/:age', component: Part, name: 'Part' },
  { path: '*', component: NotFound }
]

//5.创建路由对象,传入路由规则数组
const router = new VueRouter({
  routes,
  mode: 'hash'
})

let isLogin = true
router.beforeEach((to, from, next) => {
  if (!isLogin && to.path === '/my') {
    alert('亲,请登录!')
    //return next(false)  //阻止跳转
    return next('/part') //强行跳转至朋友页
  }
  next()
})

new Vue({
  render: h => h(App),
  router
}).$mount('#app')
